<template>
	<Row class="rowboxs">
		<Col span="24" class="perth4">
            <h3>生产状态</h3>
        </Col>
        <Col span="24" v-for="(item,index) of columns">
            <Card>
                <p slot="title">{{item.title}}</p>
                <div class="personspan">
                    <Button type="ghost" :class="item.cls">{{item.persons.name}}</Button>
                    <span>{{item.persons.weizhi}}</span>
                    <span>气压  <i :class="item.cls"> {{item.persons.phone}} </i></span>
                </div>
                <div class="personspan2">
                    <span><b class="countci">{{item.degree}} </b> {{item.content}}</span>
                    <span>安全界限 <i class="btnstopz">< 3.0（Pa）</i></span>
                    <Button type="info" icon="ionic" @click="modal6 = true">监控</Button>
                    <Modal
                        v-model="modal6"
                        title="连接失败"
                        :loading="loading"
                        @on-ok="asyncOK">
                        <p>视频连接失败...</p>
                    </Modal>
                </div>
            </Card>
        </Col>
    </Row>
</template>
<script>
export default {
  data () {
    return {
      modal6: false,
      loading: true,
      columns: [
        {
          "title": "1号机组",
          "position": "位置：1号锅炉",
          "content": "次预警",
          "degree": 4,
          "cls": "btnyunx",
          "persons": {
            "name": "运行中",
            "weizhi": "已运行15小时",
            "phone": "3.5（Pa）"
          },
          "ofe": 0
        },
        {
          "title": "2号机组",
          "position": "位置：3号压力泵",
          "content": "次预警",
          "degree": 3,
          "cls": "btnstopz",
          "persons": {
            "name": "维修中",
            "weizhi": "已停止12小时",
            "phone": "2.8（Pa）"
          },
          "ofe": 1
        },
        {
          "title": "3号机组",
          "position": "数据：Vocs",
          "content": "次预警",
          "degree": 2,
          "cls": "btnyunx",
          "persons": {
            "name": "运行中",
            "weizhi": "已运行22小时",
            "phone": "3.5（Pa）"
          },
          "ofe": 0
        }
      ]
    };
  },
  methods: {
    asyncOK () {
      setTimeout(() => {
        this.modal6 = false;
      }, 2000);
    }
  }
};
</script>
<style scoped>
    .personspan>span{
        display: inline-block;
        width: 33%;
    }
    .personspan2>span:nth-of-type(1){
        display: inline-block;
        width: 30%;
    }
    .rowboxs{
        padding: 20px;
        padding-top: 5px;
    }
    .perth4{
        line-height: 35px;
    }
    .btnyunx{
        color: #19be6b;
    }
    .btnstopz{
        color: #ed3f14;
    }
    .countci{
        color: red;
    }
</style>